<?php
$album_base=HOME."list/album/";

?>
<div id="wrapMain">
	<div id="innerMain">
		<div class="row">

   
     <div class="pull-left"><a href="<?php echo $album_base ?>" class="head_text btn btn-sm btn-danger">ALBUM</a></div> 
        <div class="btn-group pull-right">

  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    Tùy Chọn <span class="caret" style="color:#fff"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
  <li role="presentation" class="dropdown-header">Thời Gian</li>
  	<li><a href="<?php echo $album_base ?>date/desc">Mới <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="<?php echo $album_base ?>date/asc">Cũ <i class="icon-long-arrow-right"></i></a></li>
   
    <li role="presentation" class="dropdown-header">View</li>
       <li><a href="<?php echo $album_base ?>views/desc">NHIỀU <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="<?php echo $album_base ?>views/asc">ÍT <i class="icon-long-arrow-right"></i></a></li>
      
    <li role="presentation" class="dropdown-header">Like</li>
    <li><a href="<?php echo $album_base ?>like/desc">NHIỀU <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="<?php echo $album_base ?>like/asc">ÍT <i class="icon-long-arrow-right"></i></a></li>
       
       <li role="presentation" class="dropdown-header">Comment</li>
       <li><a href="<?php echo $album_base ?>comments/desc">NHIỀU <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="<?php echo $album_base ?>comments/asc">ÍT <i class="icon-long-arrow-right"></i></a></li>
  </ul>



   </div>
</div>

        <div class="clearfix"></div>
     <div style="height:20px"></div> 
        
        
		<?php
		//POST RENDER GRID VIEW DATA
		post_render_grid($data['info'],'',"album");
		$page = isset($_GET['page']) ? $_GET['page'] : 1;
		$max_page = $data['page'];
		?>
        	<nav id="page-nav">
			<a href="index.php?module=ajax&act=ajax&case=4&t=load_more_items&page=<?= $page; ?><?php if(isset($_GET['ext'])){ echo "&ext=".$_GET['ext']."&sort=".$_GET['sort']; } ?>"></a>
		</nav>
		
		<div class="loading" id="mainLoading"><div id="loadMoreItems" class="normalLoadBtn"><img width="20" src="public/images/loading.gif" alt="loading" /> Loading </div><div class="clr"></div></div>
		<div id="next-page"></div>
        
        
		</div><!-- end .row -->
	</div><!-- end innerMain -->
</div><!-- end wrapMain -->
		
<!-- end #wrapMain -->	
 <script>
  $(function(){
	 mw = getItemWidth();
    var max_page = '<?= $max_page ?>';
    var $container = $('#contentIndex');
    
    $container.imagesLoaded(function(){
    	 
      $container.masonry({
        itemSelector: '.item',
          columnWidth:mw,
		isFitWidth: true
      });
    });
    var nextSelector = '#page-nav a';
    var origNextUrl = $(nextSelector).attr('href');

    var pageRegex = /(page=)([0-9]+)/;
    var page  = origNextUrl.match(pageRegex)[2];
    var mypage = page;

    
    var loadedTime = 0;
    
    $container.infinitescroll({
	    navSelector  : '#page-nav',    // selector for the paged navigation 
	    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
	    itemSelector : '.item',     // selector for all items you'll retrieve
	        
	    path: function(pageNum) {
	    	newPage = mypage + 1;
	    	previousPage = parseInt(<?= $page; ?>) - parseInt(<?= LOAD_TIME; ?>);
	    	
	    	if(previousPage == 0) previousPage = 1;
	    	
	    	if(previousPage < 0) previousPage = null;
		    $('#mainLoading').show();

		    if(parseInt(mypage) >= parseInt(max_page)){
				$('#mainLoading').hide();
				if(previousPage != null){
					$('#next-page').append('<div class="normalLoadBtn" id="previousPage"><a href="' + '<?php echo url_ajax(); ?>' + previousPage + '"><i class=" icon-long-arrow-left"></i> Bài cũ hơn</a></div>');
				}
				$('#next-page').append('<div class="normalLoadBtn" id="nextPage">Hết dữ liệu</div>');
				return;
			}

	        if(loadedTime >= 0 && ((mypage + 1) % <?= LOAD_TIME ?> == 0) && mypage >= 1 ){
		        $('#mainLoading').hide();
		        if(previousPage != null){
					$('#next-page').append('<div class="normalLoadBtn" id="previousPage"><a href="' + '<?php echo url_ajax(); ?>' + previousPage + '"><i class=" icon-long-arrow-left"></i> Bài cũ hơn</a></div>');
				}
		        
		        $('#next-page').append('<div class="normalLoadBtn" id="nextPage"><a href="' + '<?php echo url_ajax(); ?>' + newPage+ '">Xem tiếp <i class=" icon-long-arrow-right"></i></a></div>');
	        }
	       
	        mypage++;
	        loadedTime++;
	        
	        return origNextUrl.replace( pageRegex, ("$1" + (mypage)));
        }
    },
      
      
      
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
		   mw = getItemWidth();
		   $container.masonry({
              itemSelector: '.item',
              columnWidth:mw,
      		isFitWidth: true
            });
          $('#mainLoading').hide();
        });
      }
    );
	// Auto resize
	
  $(window).resize(function(){
	  mw = getItemWidth();
	 $container.masonry( 'option', { columnWidth:mw });
	});
	// End of auto reisze
    
  });
</script>     